<template>
	<view class="container-root">
		<view class="bill-menu-root" v-for="(item,index) in menuData" :key="index" @tap="billHandleWay(item.link,index)">
			<view class="bill-menu-item" hover-class="bill-menu-hover">
				<view class="bill-menu-left">
					<text>{{item.title}}</text>
				</view>
				<view class="bill-menu-left">
					<text v-if="item.id==4 && cargoNumber !=0" class="bill-number-hint" >{{cargoNumber}}</text>
					
					<image class="bill-menu-image bill-margin-right-0" v-bind:src="menuRight.imagsRight"></image>
					
				</view>
				
			</view>
			<view class="bill-menu-line"></view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import httpRequest from '@/utils/utilHttp.js'
	
	export default {
		data() {
			return {
				menuRight:{
					imagsRight:'/static/images/right.png',
				},
				menuData : [{
					imagsLeft: '/static/images/order.png',
					title: '账单详情',
					link:'./bill-detail/bill-detail',
					id:1
				}, 
				{
					imagsLeft: '/static/images/product.png',
					title: '历史订单',
					link:'./bill-note/bill-note',
					id:2
				}]
			}
		},
		computed:{
			...mapState(['token', 'userInfo']), //对全局变量hasLogin进行监控
		},
		onLoad()
		{
			uni.setNavigationBarTitle({
				title:"我的账单",
			})			
		},
		methods: {
			billHandleWay(url,index) {
				uni.navigateTo({
					url: url
				})						
			},
		}
	}
</script>

<style>
	.bill-menu-root{		
		width: 100%;
		background-color: white;
	}
	.bill-menu-item{
		width: calc(100% - 40rpx);
		height: 90rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding: 0rpx 20rpx 1rpx 20rpx;
	}
	.bill-menu-left{
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.bill-menu-line{
	  width: 100%;
	  height: 1rpx;
	  background-color: #F1F1F1;
	}
	.bill-menu-image{
		width: 40rpx;
		height: 40rpx;
		margin-right: 20rpx;
	}
	.bill-menu-hover{
		background-color: #e3e3e5;
	}
	.bill-number-hint{
		height: 30rpx;
		width: 30rpx;
		border-radius: 15rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
		color: white;
		background-color: red;
		font-size: 24rpx;
	}
	.bill-margin-right-0{
		margin-right: 0rpx;
	}
</style>
